<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="false" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view>
			<u-empty text="暂时还没有新消息哦" mode="message" margin-top="300" :show="isZero"></u-empty>
		</view>
		<uni-list v-if="msgList.length > 0">
		    <uni-list :border="true">
		        <uni-list-chat v-for="(res, index) in msgList" :key="res.cId"
					:title="res.title" 
					:avatar="'http://localhost:8088'+res.avatar.split(',')[0]"
					:note="res.allReply > 0 ? '您有新的消息' : ''" 
					:badge-text="res.allReply"
					clickable  
					@click="onClick(res)" >
				</uni-list-chat>
		    </uni-list>
		</uni-list>
	</view>
</template>

<script>
	import Vue from 'vue';
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				title: "消息",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				isZero:false,
				msgList:[]
			}
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		onLoad() {
			this.initData();
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData(){
				Vue.prototype.$u.api.getMessageByUserId({
					userId: this.getUserInfo.userId
				}).then(res => {
					if(res.length > 0){
						this.msgList = res
					}else {
						this.isZero = true
					}
				})
			},
			onClick(res){
				// 跳转到全部回复
				uni.navigateTo({
					url: '/pages/message/chat?cId=' + res.cId + '&comId=' + res.comId + '&num=' + res.allReply
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>
